<template>
    <div>
       <Loading v-if="loadingShow"/> 
        <van-search
            v-model="SearchValue"
            placeholder="请输入搜索关键词"
            shape="round"
            @click="search"
        />
        <!-- 轮播图 -->
        <van-swipe :autoplay="1850" indicator-color="orange">
            <van-swipe-item v-for="item in banner" :key="item.id">
                <img :src="item.image_url" class="swipeImg" />
            </van-swipe-item>
        </van-swipe>
        <!-- 搜索组件 -->

        <transition
            name="animate__animated animate__bounce animate__faster"
            enter-active-class="animate__fadeInLeft "
            leave-active-class="animate__fadeOutLeft"
        >
            <router-view></router-view>
        </transition>

        <!-- 导航栏 -->
        <div class="navigation">
            <div
                class="navigationBlock"
                v-for="item in channel"
                :key="item.id"
                @click="channeled(item)"
            >
                <van-image height="30" width="30" :src="item.icon_url" />
                <p>{{ item.name }}</p>
            </div>
        </div>
        <div v-show="bottomTab">
            <!-- 品牌直供商 -->
            <div class="provideProduction">
                <p style="text-align: center; font-weight: 500; font-size: 20px; color: black">
                    品牌制造商职直供
                </p>
                <div class="provideContainer">
                    <div
                        v-for="item in brandList"
                        :key="item.id"
                        class="positionBox"
                        @click="detailBrand(item)"
                    >
                        <van-image width="172" height="110" lazy-load :src="item.pic_url">
                            <template v-slot:loading>
                                <van-loading type="spinner" size="20" />
                            </template>
                        </van-image>
                        <div class="positionChildBox">
                            <p>{{ item.name }}</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 周一周四，新品发布 -->
            <div class="newGoodsList">
                <p
                    style="
                        text-align: center;
                        font-weight: 500;
                        font-size: 20px;
                        color: black;
                        padding-top: 15px;
                    "
                >
                    周一周四 新品首发
                </p>
                <div class="provideContainer">
                    <div
                        v-for="item in newGoodsList"
                        :key="item.id"
                        class="positionBox"
                        @click="buyProduction(item.id)"
                    >
                        <van-image width="172" height="174" lazy-load :src="item.list_pic_url">
                            <template v-slot:loading>
                                <van-loading type="spinner" size="20" />
                            </template>
                        </van-image>
                        <div class="center">
                            <p>{{ item.name }}</p>
                            <p style="color: #98004d">￥ {{ item.retail_price | price }}</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 人气推荐 -->
            <div class="newGoodsList">
                <p
                    style="
                        text-align: center;
                        font-weight: 500;
                        font-size: 20px;
                        color: black;
                        padding-top: 15px;
                    "
                >
                    人气推荐
                </p>
                <van-card
                    v-for="item in hotGoodsList"
                    :key="item.id"
                    :desc="item.goods_brief"
                    :thumb="item.list_pic_url"
                    @click="buyProduction(item.id)"
                >
                    <template #price>
                        <p style="color: #98004d">￥ {{ item.retail_price | price }} 元</p>
                    </template>
                    <template #title>
                        <h3 style="font-size: 18px; font-weight: 400; margin-bottom: 12px">
                            {{ item.name }}
                        </h3>
                    </template>
                </van-card>
            </div>
            <!-- 专题精讲 -->
            <div class="newGoodsList">
                <p
                    style="
                        text-align: center;
                        font-weight: 500;
                        font-size: 20px;
                        color: black;
                        padding-top: 15px;
                    "
                >
                    专题精讲
                </p>
                <van-swipe :loop="false" :width="300" :show-indicators="false">
                    <van-swipe-item v-for="item in topicList" :key="item.id" @click="saleEnd">
                        <van-image width="300" height="200" lazy-load :src="item.scene_pic_url">
                            <template v-slot:loading>
                                <van-loading type="spinner" size="20" />
                            </template>
                        </van-image>
                        <h2 class="h2title">
                            {{ item.title }}
                            <span> ￥ {{ item.price_info | price }} 元 </span>
                        </h2>
                        <p>
                            {{ item.subtitle }}
                        </p>
                    </van-swipe-item>
                </van-swipe>
            </div>
            <!-- 居家 等等 -->
            <div class="family" v-for="item in categoryList" :key="item.id">
                <p
                    style="
                        text-align: center;
                        font-weight: 500;
                        font-size: 20px;
                        color: black;
                        padding-top: 15px;
                    "
                >
                    {{ item.name }}
                </p>
                <div class="familyContainer">
                    <div
                        v-for="itemChild in item.goodsList"
                        :key="itemChild.id"
                        class="positionBox"
                        @click="buyProduction(itemChild.id)"
                    >
                        <van-image width="172" height="174" lazy-load :src="itemChild.list_pic_url">
                            <template v-slot:loading>
                                <van-loading type="spinner" size="20" />
                            </template>
                        </van-image>
                        <div class="center">
                            <p class="centerP">{{ itemChild.name }}</p>
                            <p style="color: #98004d">￥ {{ itemChild.retail_price | price }}</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 底部撑高容器 -->
            <div class="test"></div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import Loading from '../component/Loading.vue'
export default {
    name: 'Home',
    data() {
        return {
            SearchValue: '',
            banner: [],
            categoryList: [],
            channel: [],
            paramsId: '',
            brandList: [],
            newGoodsList: [],
            hotGoodsList: [],
            topicList: [],
            loadingShow:true
        }
    },
    components:{
Loading
    },
    computed: {
        ...mapState('tabbar', ['bottomTab'])
    },
    methods: {
        //点击专题精讲
        saleEnd() {
            this.$notify({ type: 'success', message: '该物品已售罄', duration: 800 })
        },
        //跳转 购物页面
        buyProduction(id) {
            this.$router.push({
                name: 'SearchDetails',
                params: {
                    id: id
                }
            })
        },
        // 点击导航栏的图片触发事件
        detailBrand(v) {
            this.$router.push({
                name: 'brand',
                params: {
                    url: v.list_pic_url,
                    detail: v.simple_desc
                }
            })
        },
        // 点击搜索框
        search() {
            this.$router.push({
                name: 'search'
            })
            this.$store.commit('tabbar/Bottom', false)
        },
        // 点击 轮播图下面的图片
        channeled(v) {
            this.paramsId = v.id
            this.$router.push({
                name: 'channel',
                params: {
                    paramsId: this.paramsId
                }
            })
        }
    },
    created() {
        this.$http
            .get('/index/index')
            .then(res => {
               
                let { data } = res
                if (data.errno != 0) {
                    this.$notify({
                        type: 'danger',
                        message: data.errmsg
                    })
                    return
                }
                const {
                    banner,
                    categoryList,
                    channel,
                    brandList,
                    newGoodsList,
                    hotGoodsList,
                    topicList
                } = data.data
                this.channel = channel
                this.banner = banner
                this.categoryList = categoryList
                this.brandList = brandList
                this.newGoodsList = newGoodsList
                this.hotGoodsList = hotGoodsList
                this.topicList = topicList
                console.log(data.data)
                 this.loadingShow = false
            })
            .catch(err => {
                console.log(err)
            })
    }
}
</script>

<style scoped>
.centerP {
    width: 172px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 5px 0;
}
.h2title {
    font-size: 16px;
    white-space: nowrap;
    font-weight: 600;
    padding: 10px;
}
.h2title > span {
    font-size: 16px;
    color: #98004d;
    text-overflow: ellipsis;
    overflow: hidden;
}
.h2title + p {
    font-size: 16px;
    padding-left: 10px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 270px;
}
.swipeImg {
    width: 100%;
}
.navigation {
    width: 100%;
    display: flex;
    font-size: 14px;
    text-align: center;
    background-color: #fff;
    padding: 20px 0;
}
.navigationBlock {
    width: 20%;
}
.provideProduction {
    background-color: #fff;
    padding-top: 15px;
    margin-top: 15px;
    color: black;
}
.provideContainer {
    padding-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    font-size: 14px;
}
.familyContainer {
    padding-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: 14px;
}
.positionBox {
    position: relative;
    margin-top: 1px;
}
.positionChildBox {
    position: absolute;
    top: 10px;
    left: 10px;
}
.positionChildBox p:last-child {
    margin-top: 10px;
}
.test {
    width: 100%;
    height: 80px;
}
.center {
    text-align: center;
}
.newGoodsList {
    background-color: #fff;
    margin-top: 20px;
}
.newGoodsList .van-swipe-item {
    margin-right: 9px;
    padding: 10px 0;
    background-color: #fff;
}
.newGoodsList .van-swipe {
    overflow: hidden;
}
.family {
    margin-top: 30px;
    background-color: #fff;
}
</style>
